/**
 * 培训记录列表
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="ry">
							<template #label><vp-label zh="人员" en="Person" /></template>
							<el-input v-model="searchForm.ry" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="kc">
							<template #label><vp-label zh="课程" en="Course"/></template>
							<el-input v-model="searchForm.kc" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="pxbh">
							<template #label><vp-label zh="培训编号" en="Training No." /></template>
							<el-input v-model="searchForm.pxbh" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fsbsList">
							<template #label><vp-label zh="是否复训" en="Retraining" /></template>
							<el-select v-model="searchForm.fsbsList" multiple collapse-tags clearable>
								<el-option :value="10" label="初训"></el-option>
                            	<el-option :value="20" label="复训"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ksrq">
							<template #label><vp-label zh="培训时间" en="Training Time"/></template>
							<el-date-picker
								v-model="searchForm.ksrq"
								type="daterange"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
								clearable
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jgList">
							<template #label><vp-label zh="考核结论" en="Result" /></template>
							<el-select v-model="searchForm.jgList" multiple collapse-tags clearable>
								<el-option :value="10" label="合格"></el-option>
                            	<el-option :value="20" label="不合格"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zsbh">
							<template #label><vp-label zh="证书编号" en="Certificate No."/></template>
							<el-input v-model="searchForm.zsbh" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fbt">
							<template #label><vp-label zh="副标题" en="Subtitle"/></template>
							<el-input v-model="searchForm.fbt" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="pxdd">
							<template #label><vp-label zh="培训地点" en="Location"/></template>
							<el-input v-model="searchForm.pxdd" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jyxm">
							<template #label><vp-label zh="教员" en="Trainer"/></template>
							<el-input v-model="searchForm.jyxm" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="kclbList">
							<template #label><vp-label zh="课程类别" en="Course Category" /></template>
							<VpDictSelectMulit :lxid="601" :selectedId="searchForm.kclbList"
								@dictMulitSelected="(dicts: any) => { searchForm.kclbList = dicts }" class="w100" clearable />
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bz">
							<template #label><vp-label zh="备注" en="Remark"/></template>
							<el-input v-model="searchForm.bz" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'trainingRecord.edit'" @click="handleAdd"/>
		</template>
		<template #table>
			<vp-vxe-table
				id="trainingRecordTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column 
					sortable
					field="dabh" 
					title="人员编号 Person No."
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="人员编号" en="Person No." /></template>
				</vxe-column>

				<vxe-column 
					sortable
					field="ryxm"
					title="人员 Person"
					show-overflow 
					width="100"
				>
					<template #header><vp-label zh="人员" en="Person" /></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="kcbh" 
					title="课程编号 Course No."
					show-overflow
					width="120"
				>
					<template #header><vp-label zh="课程编号" en="Course No."/></template>
					<template #default="{ row }">
						<el-link @click="handleViewCourse(row.kcid)">{{ row.kcbh }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					field="kcmc_zw" 
					title="课程名称 Course Name"
					show-overflow 
					width="200"
				>
					<template #header><vp-label zh="课程名称" en="Course Name" /></template>
					<template #default="{ row }">
						<span>{{ (row.kcmcZw || '') + ' ' + (row.kcmcYw || '') }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="pxbh" 
					title="培训编号 Training No."
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="培训编号" en="Training No." /></template>
					<template #default="{ row }">
						<el-link @click="handleViewTrainingPlan(row.pxid)">{{ row.pxbh }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="fsbs" 
					title="是否复训 Retraining"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="是否复训" en="Retraining" /></template>
					<template #default="{ row }">
						<span>{{ row.fsbs === 10 ? '初训' : row.fsbs === 20 ? '复训' : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="ksrq" 
					title="培训时间 Training Time"
					show-overflow
					width="190"
				>
					<template #header><vp-label zh="培训时间" en="Training Time" /></template>
					<template #default="{ row }">
						<span>{{ row.ksrq }}</span>
						<span v-if="row.jsrq"> ~ </span>
						<span>{{ row.jsrq }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="cj" 
					title="成绩 Score"
					show-overflow 
					width="80"
				>
					<template #header><vp-label zh="成绩" en="Score"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="jg" 
					title="考核结论 Result"
					show-overflow 
					width="100"
				>
					<template #header><vp-label zh="考核结论" en="Result"/></template>
					<template #default="{ row }">
						<span>{{ row.jg === 10 ? '合格' : row.jg === 20 ? '不合格' : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="zsbh" 
					title="证书编号 Certificate No."
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="证书编号" en="Certificate No."/></template>
				</vxe-column>
				<vxe-column 
					field="pxjg" 
					title="培训机构 Training Org."
					show-overflow 
					width="100"
				>
					<template #header><vp-label zh="培训机构" en="Training Org." /></template>
				</vxe-column>
				<vxe-column 
					field="jyxm" 
					title="教员 Trainer"
					show-overflow 
					width="80"
				>
					<template #header><vp-label zh="教员" en="Trainer" /></template>
				</vxe-column>
				<vxe-column 
					field="pxxs" 
					title="培训形式 Training Format"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="培训形式" en="Training Format" /></template>
				</vxe-column>
				<vxe-column 
					field="ksxs" 
					title="考试形式 Exam Format"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="考试形式" en="Exam Format" /></template>
				</vxe-column>
				<vxe-column 
					field="fbt" 
					title="副标题 Subtitle"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="副标题" en="Subtitle"/></template>
				</vxe-column>
				<vxe-column 
					field="pxdd" 
					title="培训地点 Location"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="培训地点" en="Location" /></template>
				</vxe-column>
				<vxe-column 
					field="bm" 
					title="所在部门 Department"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="所在部门" en="Department"/></template>
				</vxe-column>
				<vxe-column 
					field="kclb" 
					title="课程类别 Course Category"
					show-overflow 
					width="130"
				>
					<template #header><vp-label zh="课程类别" en="Course Category"/></template>
				</vxe-column>
				<vxe-column 
					field="bz" 
					title="备注 Remark"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="备注" en="Remark"/></template>
				</vxe-column>
				<vxe-column 
					field="fj" 
					title="附件 Attachment"
					show-overflow 
					width="200"
				>
					<template #header><vp-label zh="附件" en="Attachment"/></template>
					<template #default="{ row }">
						<RowAttachment 
							:attachmentList="row.attachments" 
							:readOnly="true"
						/>
					</template>
				</vxe-column>
				<vxe-column 
					field="operation" 
					title="操作 Operation"
					fixed="right" 
					width="140"
				>
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="!scope.row.pxid" text v-auth="'trainingRecord.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-del v-if="!scope.row.pxid" text v-auth="'trainingRecord.edit'" @click="handleDelete(scope.row)"/>
							<vp-btn-view text @click="handleView(scope.row.id)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditTrainingRecord ref="editTrainingRecordRef" @formSubmited="loadDataList"></EditTrainingRecord>
	</vp-main-page>
</template>
<script setup lang="ts" name="trainingRecord">
import { onMounted, reactive, ref, defineAsyncComponent } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import RowAttachment from '/@/components/vp/file/VpRowAttachment.vue';
import VpDictSelectMulit from '/@/components/vp/dict/VpDictSelectMulit.vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';

const EditTrainingRecord = defineAsyncComponent(() => import('./component/EditTrainingRecord.vue'));

const searchForm = reactive({
	ry: "",
	kc: "",
	pxbh: "",
	fbt: "",
	jgList: [],
	fsbsList: [],
	ksrq: [],
	pxdd: "",
	jyxm: "",
	kclbList: [],
	bz: "",
	zsbh: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	loading.value = true;
	request.get('/training/record/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadDataList();
})

const tableRef = ref();
const editTrainingRecordRef = ref();

// 新增
const handleAdd = ()=>{
	editTrainingRecordRef.value.handleOpen({
		type: 'add',
	});
}

// 修改
const handleEdit = (row: any)=>{
	editTrainingRecordRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

// 删除
const handleDelete = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.delete(`/training/record/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 查看
const handleView = (id: string)=>{
	router.push({
		name: "viewTrainingRecord",
		params: {
			id: id,
		},
	})
}

// 查看培训计划
const handleViewTrainingPlan = (id: string)=>{
	router.push({
		name: "viewTrainingPlan",
		params: {
			id: id,
		},
	})
}

// 查看课程
const handleViewCourse = (id: string)=>{
	router.push({
		name: "viewTrainingCourse",
		params: {
			id: id,
		},
	})
}

</script>

<style scoped lang="scss">
</style>